<template>
	<view class="detail-box">
		<!-- #ifdef MP-WEIXIN -->
		<view style="height: 40rpx;background-color:#F5F7FA ;"></view>
		<!-- #endif -->
		<view class="content-box">
			<view class="txt-form">
				<view class="item">
					<view class="lable">孔号</view>
					<view class="value">{{ slipCastingInfo.ringNumber || '' }}</view>
				</view>
				<view class="item">
					<view class="lable">施工工法</view>
					<view class="value">{{ slipCastingInfo.constructionMethod || '' }}</view>
				</view>
				<view class="item">
					<view class="lable">项目名称</view>
					<view class="value">{{ slipCastingInfo.projectName || '' }}</view>
				</view>
				<view class="monitor-box" v-if="slipCastingInfo && slipCastingInfo.slipCastingList && slipCastingInfo.slipCastingList[currIndex] && slipCastingInfo.slipCastingList[currIndex].isConstruction">
					<view class="title">实时监测</view>
					<view class="time">
						<u-icon name="clock" :key="(new Date()).getTime().toString()"></u-icon>
						<view style="margin-left: 10rpx;">监测时间：{{ slipCastingInfo.realTimeMonitoring ? slipCastingInfo.realTimeMonitoring.monitoringTime : '' }}</view>
					</view>
					<view class="num">
						<view class="value">
							<view class="txt">差异沉降/mm：</view>
							<view class="txt-num">{{ slipCastingInfo.realTimeMonitoring ? (slipCastingInfo.realTimeMonitoring.sedimentation || 0) : '' }}</view>
						</view>
						<view class="value">
							<view class="txt">水平收敛/mm：</view>
							<view class="txt-num">{{ slipCastingInfo.realTimeMonitoring ? (slipCastingInfo.realTimeMonitoring.level || 0) : '' }}</view>
						</view>
					</view>
				</view>
				<view class="monitor-box height-add">
					<view class="title">施工监测</view>
					<view class="time">
						<u-icon name="clock" :key="(new Date()).getTime().toString()"></u-icon>
						<view style="margin-left: 10rpx;">监测时间：{{ constructions.startTime && constructions.endTime ? `${constructions.startTime || ''} ~ ${constructions.endTime || ''}` : '' }}</view>
					</view>
					<view class="num">
						<view class="value">
							<view class="txt">水泥注浆量/升：</view>
							<view class="txt-num">{{ constructions.cement }}</view>
						</view>
						<view class="value">
							<view class="txt">水玻璃注浆量/升：</view>
							<view class="txt-num">{{ constructions.sodiumSilicate }}</view>
						</view>
					</view>
					<view class="num">
						<view class="value">
							<view class="txt">差异沉降/mm：</view>
							<view class="txt-num">{{ constructions.sedimentation }}</view>
						</view>
						<view class="value">
							<view class="txt">水平收敛/mm：</view>
							<view class="txt-num">{{ constructions.level }}</view>
						</view>
					</view>
				</view>
				<view class="tab-content">
					<view class="item" v-for="(item, index) in (slipCastingInfo.slipCastingList || [])" :class="currIndex == index ? 'active' : ''" @click="changeTab(index)">
						<view style="position: relative;">第{{ index + 1 }}次注浆</view>
						<view class="tip" v-if="item.isConstruction">正在施工</view>
					</view>
				</view>
				<view class="text-all">
					<view class="num">
						<view class="value">
							<view class="txt">初始沉降/mm：</view>
							<view class="txt-num">{{ constructions.sedimentationLast }}</view>
						</view>
						<view class="value">
							<view class="txt">结束收敛/mm：</view>
							<view class="txt-num">{{ constructions.levelLast }}</view>
						</view>
					</view>
					<view class="num">
						<view class="value">
							<view class="txt">累计沉降/mm：</view>
							<view class="txt-num">{{ constructions.sedimentationTotal }}</view>
						</view>
						<view class="value">
							<view class="txt">累计收敛/mm：</view>
							<view class="txt-num">{{ constructions.levelTotal }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		currIndex: {
			type: Number,
			default: 0
		},
		slipCastingInfo: {
			type: Object,
			default: () => ({})
		},
		constructions: {
			type: Object,
			default: () => ({})
		}
	},
	// data() {
	// 	return {
	// 		currIndex: 0,
	// 		constructions: {},
	// 		slipCastingInfo: {}
	// 	}
	// },
	methods: {
		changeTab(index, data) {
			console.log(this.constructions, 'constructions');
			// return
			// this.currIndex = index
			// if (data) {
			// 	this.slipCastingInfo = data
			// }
			// this.constructions = this.slipCastingInfo.slipCastingList[index] ? this.slipCastingInfo.slipCastingList[index].constructions : {}
			this.$emit('changeTabIndex', index)
		}
	}
}
</script>

<style lang="scss" scoped>
	.detail-box {
		/* #ifdef MP-WEIXIN */
		padding-top: 180rpx;
		/* #endif */
	}
	.content-box {
		padding: 0 30rpx;
		
		.txt-form {
			.item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e1e5ed;
				.lable {
					width: 100px;
				}
				.value {
					width: 300px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: right;
				}
			}
			.monitor-box {
				font-size: 14px;
				color: #6a819e;
				border-bottom: 1px dashed #e3e5e8;
				height: 128px;
				.title {
					padding-top: 20px;
					font-weight: 600;
					color: #2f80ed;
					font-size: 18px;
				}
				.time {
					padding-top: 7px;
					display: flex;
					align-items: center;
				}
				.num {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 10px;
					.value {
						display: flex;
						align-items: center;
						// justify-content: space-between;
						.txt-num {
							font-weight: bold;
							font-size: 18px;
							color: #425166;
						}
					}
				}
				&.height-add {
					height: 160px;
				}
			}
			.tab-content {
				display: flex;
				align-items: center;
				padding-top: 22px;
				overflow-x: auto;
				.item {
					flex-shrink: 0;
					text-align: center;
					// width: 109px;
					padding: 3px 15px;
					height: 28px;
					background: #ffffff;
					box-shadow: 0px 3px 4px 0px rgba(47, 102, 246, 0.12);
					border-radius: 8px;
					position: relative;
					margin-left: 8px;
					&:nth-child(1) {
						margin-left: 0;
					}
					&.active {
						background-color: #2f80ed;
						color: #ffffff;
					}
					.tip {
						width: 49px;
						height: 17px;
						line-height: 17px;
						background: linear-gradient( 90deg, #5295FE 0%, #3FB8FF 100%);
						box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
						border-radius: 25px;
						font-weight: 500;
						font-size: 12px;
						color: #FFFFFF;
						position: absolute;
						right: 8px;
						bottom: 27px;
					}
				}
			}
			.text-all {
				font-size: 14px;
				color: #6a819e;
				padding-top: 21px;
				.num {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 20px;
					.value {
						display: flex;
						align-items: center;
						// justify-content: space-between;
						.txt-num {
							font-weight: bold;
							font-size: 18px;
							color: #425166;
						}
					}
				}
			}
		}
	}
</style>